<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


        svg.append('line')
          .attr('x1',50)
          .attr('y1',50)
          .attr('x2',50)
          .attr('y2',550)
          .attr('stroke','#ccc');

        svg.append('line')
          .attr('x1',750)
          .attr('y1',50)
          .attr('x2',750)
          .attr('y2',550)
          .attr('stroke','#ccc');  
        
        const g = svg.append('g').attr('transform','translate(50,50)');

        // g.append('circle')
        //   .attr('cx',50)
        //   .attr('cy',150)
        //   .attr('r',50)
        //   .attr('fill','#fac')
        //   .on('click',(e,d)=>{
        //     d3.select(e.target)
        //       .transition()
        //       .duration(2000)
        //       .ease(d3.easeBounceIn)
        //       .attr('cx',650)
        //   })  

          // g.append('circle')
          // .attr('cx',50)
          // .attr('cy',50)
          // .attr('r',50)
          // .attr('fill','#fac')
          //     .transition()
          //     .duration(2000)
          //     .ease(d3.easeLinear)
          //     .attr('cx',650)


          // g.append('circle')
          // .attr('cx',50)
          // .attr('cy',150)
          // .attr('r',50)
          // .attr('fill','#fac')
          //     .transition()
          //     .duration(2000)
          //     .ease(d3.easeCubicIn)
          //     .attr('cx',650)


        g.append('circle')
          .attr('cx',50)
          .attr('cy',150)
          .attr('r',50)
          .attr('fill','#fac')
          .on('click',(e,d)=>{
            d3.select(e.target)
              .transition()
              .duration(2000)
              .ease(myEase)
              .attr('cx',650)
          })  


         let i = 1 ;
         let b = true ;
         function  myEase(t){
          i++;
          if(i%20 == 0){
            b = !b ;
            i = 1;
          }
          return b?t*t:t*t*t ;
         } 
    </script>
  </body>
</html>
